<template>
  <div>
    <ul>
      <li v-for="msg in msgList" :key="msg.id">
				<router-link 
					:to="{
						name:'xiangqing',
						query:{
							id:msg.id,
							title:msg.title
						}
					}"
				>
					{{ msg.title }}
				</router-link>
				<button @click="pushShow(msg)">push查看</button>
				<button @click="replaceShow(msg)">replace查看</button>
			</li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      msgList: [
        { id: "qwe1", title: "消息001" },
        { id: "qwe2", title: "消息002" },
        { id: "qwe3", title: "消息003" },
      ],
    };
  },
	mounted() {
		console.log('Message组件挂载了',this.$router)
	},
	beforeDestroy() {
		console.log('Message组件将要被销毁')
	},
	methods: {
		pushShow(msg){
			//第一种写法，给push传递一个字符串
			// this.$router.push(`/home/message/detail?id=${msg.id}&title=${msg.title}`)

			//第二种写法，给push传递一个对象
			this.$router.push({
				name:'xiangqing',
				query:{
					id:msg.id,
					title:msg.title
				}
			})

		},
		replaceShow(msg){
			//第一种写法，给replace传递一个字符串
			// this.$router.replace(`/home/message/detail?id=${msg.id}&title=${msg.title}`)

			//第二种写法，给replace传递一个对象
			this.$router.replace({
				name:'xiangqing',
				query:{
					id:msg.id,
					title:msg.title
				}
			})
		}
	},
};
</script>